<!DOCTYPE html>
<html lang="en">
<head>
<!--    问卷调查-(1)问卷管理功能-->
    <meta charset="UTF-8">
    <title>问卷管理功能</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <link rel="stylesheet" href="../plugins/layui/css/layui.css">
    <script src="../plugins/layui/layui.js"></script>
    <style>
        #divzhanshi,body{
            background-color: black;
        }
        .col-md-4{
            margin-top: 10px;
            box-shadow: 0 0 3px 1px rgba(50, 50, 50, 0.5);
            transition: 0.3s;
        }
        .col-md-4:hover {
            margin-top: 5px;
            box-shadow: 0 3px 15px 3px rgba(50, 50, 50, 0.5);
        }
        #tjid,#scid{
            padding: 8px 0;
            /*margin-bottom: 10px;*/
            margin-top: 10px;
            border: #c0c0c0 1px dashed;
            font-size: 12px;
            width: 100px;
            /*height: 50px;*/
            text-align: center;
            -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 50%);
            text-shadow: 0 -1px 1px rgb(0 0 0 / 25%);
            vertical-align: middle;
            text-decoration: none;
            font-weight: bold;
            cursor: pointer;
            margin-right: 10px;
            background: url(%3D%3D) repeat-x;
            display: inline-block;
            color: #fff !important;
            background-color: #ffb515;
        }
    </style>
</head>
<body>
<div class="container-fluid" id="zong" style="overflow: scroll;height: 820px">
<!--    导航栏-->
<div class="row">
        <div class="col-md-12" >
            <nav class="navbar navbar-link">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-folder-open"></span></a>
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <form class="navbar-form navbar-left">
                            <div class="form-group">
                                <input id="chaxunbiaoti" type="text" class="form-control" placeholder="输入标题关键字自动搜索">
                            </div>
                        </form>

                        <form class="navbar-form navbar-left ">
                            <div class="form-group" style="color: white;margin-left: 250px ;">
                                <h1 style="font-weight: bolder;text-shadow:5px 5px 5px #17a2b8;margin-top: 10px ">社区问卷调研详细报告</h1>
                            </div>
                        </form>

                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#motak1" data-toggle="modal" class="btn btn-inverse" id="tjid" >添加问卷标题</a></li>
                            <li><a href="#motak2" data-toggle="modal"  class="btn btn-inverse" id="scid">删除问卷标题</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
</div>
<!--模态框 -->
<div style="font-size: 25px;"  class="modal fade" id="motak" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
            <h1 id="h1biaoti"></h1>
            </div>
            <div class="modal-body">
                <div class="form-group has-feedback">
                    <label>问卷题目</label>
                    <ol id="ol">
                    </ol>
                </div>
                <hr/>
                <div  class="row">
                    <div class="col-md-12 btn-group" style="margin-left: 0">
                        <button value="1" id="da" class="btn btn-primary">添加答案</button>
                        <button value="2" id="tm" class="btn btn-primary">添加题目</button>
                    </div>
                </div>

                <div id="tianjiadaan" class="row">
                    <div class="col-md-12" style="margin-left: 0">
                        请选择问题： <select id="wentilist" style="width: 100%;"></select>
                    </div>
                    <div class="col-md-12">
                        请填写答案：<textarea id="tea" style="width: 100%"></textarea>
                    </div>
                </div>

                <div hidden id="tianjiawenti" class="row">
                    <div class="col-md-12" style="margin-left: 0">
                        请填写问题 <input id="timu"/>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button id="tinajiadaan" value="1" type="button" class="btn btn-primary">添加</button>
                <button  class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--<div style="width: 500px;height: 500px;background-color: black" id="div1"></div>-->
<!--  添加标题-->
<div style="font-size: 25px;"  class="modal fade" id="motak1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <form action="uploadFile0" method="post"  accept-charset="UTF-8"
                  enctype="multipart/form-data">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1>添加问卷</h1>
                    </div>
                    <div class="modal-body">
                        <div class="form-group has-feedback">
                            <label>问卷题目</label>
                            <input id="timuone" class="form-control"/>
                        </div>
                        <div class="form-group has-feedback">
                            <label>问卷描述</label>
                            <input id="miaoshu" class="form-control"/>
                        </div>
                        <div class="form-group has-feedback">
                            <label>问卷状态</label>
                            <input readonly id="zt"  value="根据时间变化而变化" class="form-control"/>
                        </div>
                        <div class="form-group has-feedback">
                            <label>问卷开始时间</label>
                            <input id="ks" type="date" name="kaishisj" class="form-control"/>
                        </div>
                        <div  class="form-group has-feedback">
                            <label>问卷结束时间</label>
                            <input id="js" type="date" name="jieshusj" class="form-control"/>
                        </div>
<!--                        -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
                        <div class="form-group has-feedback">
                                <label>问卷封面</label>
<!--                                <input name="mf" type="file" class="form-control"/><br/>-->
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="test1">上传图片</button>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" height="200px" width="200" id="demo1">
                                    <p id="demoText"></p>
                                </div>
                                <div style="width: 200px;">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                        <div class="layui-progress-bar" lay-percent=""></div>
                                    </div>
                                </div>
                            </div>

                        </div>
<!--                        -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
                        <div class="form-group has-feedback">
                            <label>操作日期</label>
                            <input id="czrq" readonly name="caozuoriq" class="form-control"/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="button" id="tianjiabiaoti"  value="提交" class="btn btn-primary"/>
                        <button type="button"  class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
<!--删除标题-->
<div style="font-size: 25px;"  class="modal fade" id="motak2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1>删除问卷标题</h1>
                    </div>
                    <div class="modal-body">
                      <ol id="btlist"  class="list-group">
                          <li style="text-align: center">
                              <div class="col-lg-3">标题</div>
                              <div class="col-lg-7"></div>
                              <div class="col-lg-2">状态/操作</div>
                          </li>
                      </ol>
                    </div>
                    <div class="modal-footer">
                        <input  id="sahnchu" type="button"  value="提交" class="btn btn-primary"/>
                        <button  class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">

    /**
     * 时间和状态变化
     */
    $("#ks").on("input",function(){
        let ks = $("#ks").val()
        let js =  $("#js").val()
        let zt = $("#zt")
        if(js==""){
          zt.val("时间未选完！")
            return;
        }
        if(ks>=js){
          zt.val("开始时间不能大于结束时间")
        }else {
            let newdate = new Date();
            let dataks = new Date(ks)
            if(newdate>dataks){
                zt.val("开始时间小于操作时间")
            }else {
                zt.val("未开始")
            }
        }
    });
    $("#js").on("input",function(){
        let ks = $("#ks").val()
        let js =  $("#js").val()
        let zt = $("#zt")
        if(ks==""){
            zt.val("时间未选完！")
            return;
        }
        if(ks>=js){
            zt.val("开始时间不能大于结束时间")
        }else {
            let newdate = new Date();
            let dataks = new Date(ks)
            if(newdate>dataks){
                zt.val("开始时间小于操作时间")
            }else {
                zt.val("未开始")
            }
        }
    });

    /**
     * 操作时间
     */
    function getsj(){
        let date = new Date().toLocaleString()
        $("#czrq").val(date)
    }
    setInterval(getsj,1000)


    /**
     * 删除标题
     */
    $("#sahnchu").on("click",function(){
        let cs = $("input[type=checkbox]:checked")
        if(cs==""){
            Dialogs("未选择删除项！","red")
            return;
        }


        layer.confirm('你确定删除吗？？', {
                offset: '100px'
                , btn: ['确定','取消'] //按钮
            }, function(){
                    let ar = new Array(cs.length)
                    for(let i = 0 ;i<cs.length;i++){
                        ar[i]=cs[i].value
                    }
                    $.ajax({
                        url:"delectbiaoti",
                        type:"post",
                        dataType:"json",
                        data:{"ar":ar},
                        success:function(data){
                            if(data){
                                succ("删除成功")
                            }else {
                                succ("删除失败")
                            }
                        }

                    });
            }, function(){
                layer.msg('已取消'); //按取消后回馈
            }
        );
    });


    // $("#da").on("click",function (){
    //     $("#tianjiawenti").attr("hidden","true")
    //     $("#tianjiadaan").get(0).removeAttribute("hidden")
    //     $("#tinajiadaan").attr("value",$(this).val())
    // });
    // $("#tm").on("click",function (){
    //     $("#tianjiadaan").attr("hidden","true")
    //     $("#tianjiawenti").get(0).removeAttribute("hidden")
    //     $("#tinajiadaan").attr("value",$(this).val())
    // });
    /**
     * 点击添加答案/题目时触发
     */
    // $("#tinajiadaan").on("click",function(){
    //     let v= $(this).val()
    //     if(v=="1"){
    //         let vid = $("#h1biaoti").val()
    //         let sid = $("#wentilist").val()
    //         let text = $("#tea").val()
    //         if(text==""){
    //             //914 x 523
    //             alert("答案不饿能为空")
    //             return;
    //         }
    //         $.ajax({
    //             url:"adddaan",
    //             type:"post",
    //             dataType:"json",
    //             data:{vid:vid,sid:sid,text:text},
    //             success:function(data){
    //                 if(data){
    //                     alert("添加成功")
    //                     window.location.reload()
    //                 }else {
    //                     alert("添加失败")
    //                 }
    //             }
    //         });
    //     }else {
    //         let timu = $("#timu").val()
    //         $.ajax({
    //             url:"addtimu",
    //             type:"post",
    //             dataType:"json",
    //             data:{timu:timu,vid:$("#h1biaoti").val()},
    //             success:function(data){
    //                 if(data){
    //                     alert("添加成功")
    //                     //  $("#motak").on("shown.bs.modal", function () {}).modal('show')
    //                     window.location.reload()
    //                 }else {
    //                     alert("添加失败,题目名已存在")
    //                 }
    //             }
    //         });
    //     }
    // });
    /**
     * 生成对于的缩略图并加载相关信息及模态框
     * @param arr
     */
    function  add(arr){
        $("#btlist li:not(:first)").remove()
        let row ;
        for(let i=0;i<arr.length;i++){
            let obj=arr[i]
            if(obj.vote_vcondition=="正在进行"){
                $("#btlist").append(" <li class=\"list-group-item\"><span class=\"badge bg-danger\"><input name=\"c1\" value="+obj.vote_vid+" type=\"checkbox\" disabled=\"disabled\"></span>"+obj.vote_vtitled+"<span class=\"badge bg-danger\">"+obj.vote_vcondition+"</span>"+"</li>\n")
            }else {
                $("#btlist").append(" <li class=\"list-group-item\"><span class=\"badge bg-info\"><input name=\"c1\" value="+obj.vote_vid+" type=\"checkbox\"/></span>"+obj.vote_vtitled+"<span class=\"badge bg-info\">"+obj.vote_vcondition+"</span>"+"</li>\n")
            }
            if(i%3==0){
                row =document.createElement("div")
                $(row).attr("class","row")
                $(row).attr("name","rows")
                $("#zong").append(row)
            }
            console.log(obj.vote_vcover)
            let div1 =  document.createElement("div")
            $(div1).attr("class","col-md-4")
            $(row).append(div1)
            let div2 =  document.createElement("div")
            $(div2).attr("height","500px")
            $(div2).attr("href","#")
            $(div2).attr("class","thumbnail")
            $(div1).append(div2)
            let img =  document.createElement("img")
            $(img).attr("src","/img/"+obj.vote_vcover)
            $(img).attr("class","img-circle")
            let shanchu =  document.createElement("span")
            $(shanchu).text("xaaaaaaaaaaa")
            $(div1).on("click",function(){
                //跳转页面 并传值
                let vv = JSON.stringify(obj)
               localStorage.setItem("obj",vv)
               window.location.href="details.html"
            })
            let div3 =  document.createElement("div")
            $(div3).attr("class","caption")
            $(div3).html(" <h1>问卷标题："+obj.vote_vtitled+"</h1>\n"+
                "                <br><h3>问卷描述："+obj.vote_vdepict+"</h3>\n" +
                "                <br><h3>开始时间:"+new Date(obj.vote_vstart).toLocaleString()+"</h3>\n" +
                "                <br><h3>结束时间:"+new Date(obj.vote_vend).toLocaleString()+"</h3>\n" +
                "                <br><h3>状态:"+obj.vote_vcondition+"</h3>")
            $(div2).append(img,div3)
        }
    };

    /**
     * 加载所有数据
     */
    $.ajax({
        url:"getAllwenjuan",
        type:"get",
        dataType:"json",
        success:function(data){
            add(data)
        }
    });


    /**
     * 自动搜索标题
     */
    $("#chaxunbiaoti").on("input",function(){
        $.ajax({
            url:"chaxunbiaotiba",
            type:"get",
            data:{biaotimc:$(this).val()},
            dataType:"json",
            success:function(data){
                $("div[name=rows]").remove()
                add(data)
            }
        });
    });



</script>
<script type="text/javascript">
    let i =0;
    $("#tianjiabiaoti").on("click",function(){
        let timu = $("#timuone").val()
        if(timu==""){
            Dialogs("标题不能为空","red")
            return ;
        }
        let miaoshu = $("#miaoshu").val()
        if(miaoshu==""){
            Dialogs("描述不能为空","red")
            return ;
        }
        let zhuangtai = $("#zt").val()
        if(zhuangtai=="根据时间变化而变化"||zhuangtai=="时间未选完！"||zhuangtai=="开始时间不能大于结束时间"||zhuangtai=="开始时间小于操作时间"){
            Dialogs("时间不符合规定","red")
            return ;
        }
        if(i==0){
            Dialogs("未选择图片","red")
            return ;
        }
        let kaishisj =$("#ks").val()
        let  jieshusj=$("#js").val()
        let caozuoriq=$("#czrq").val()
        $.ajax({
            url:"uploadFile0",
            type:"post",
            dataType:"json",
            data:{
                timu:timu,
                miaoshu:miaoshu,
                zhuangtai:zhuangtai,
                kaishisj:kaishisj,
                jieshusj:jieshusj,
                caozuoriq:caozuoriq
            },
            success:function(data){
                if(data){
                    succ("添加成功")
                }else {
                    Dialogs("添加失败，标题重复或未知异常","red")
                }
            }
        })
    });
    layui.use(['upload', 'element', 'layer'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;
        //常规使用 - 普通图片上传
          i=0
        var uploadInst = upload.render({

             elem: '#test1'
            ,url: 'test'//此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,method:'POST'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                 console.log(res)
                //如果上传失败
                if(!res){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                    i=1
                }
            }
        });
    });
    function Dialogs(text,color){
        layer.open({
            content: '执行结果:'+text.fontcolor(color)
            ,offset:'100px'
            ,time:'3000'
            ,success:function(layero, index) {
                var timeNum = this.time/1000, setText = function(start){
                    layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
                };
                setText(!0);
                this.timer = setInterval(setText, 1000);
                if(timeNum <= 0) clearInterval(this.timer);
            }
        });
    }
    function succ(mags){
        layer.confirm('执行结果： '+mags.fontcolor("green"), {
                offset: '100px'
                , btn: ['确定'] //按钮
            }, function(){
                window.location.reload()
            }
        );
    }
</script>
</html>